<template>
    <li class="u-msg">
        <div
            v-if="(msg.msgType === 0 || msg.msgType === 5 || msg.msgType === 999 || msg.msgType === 1 || msg.msgType === 2 || msg.msgType === 3 || msg.msgType === 9) && time"
            class="time-tag"
        >
            <!-- <hr class="line"> -->
            <span class="time">{{time}}</span>
        </div>
        <div
            v-if="msg.msgType === 0 || msg.msgType === 1"
            :class="{'item-me':direction == 1,'item-you':direction == 0}"
        >
            <div class="left">
                <img class="member_avatar" v-if="direction == 0" :src="msg.memberIco">
                <p v-if="direction == 1" class="name" v-html="info.name || '主任医师'"></p>
                <p v-if="direction == 1 && msg.msgType == 0" class="content" v-html="msg.showText"></p>
                <p v-if="direction == 1 && msg.msgType == 1" class="content">
                    <img
                        v-for="(item,index) of msg.url"
                        :key="index"
                        :src="item.smallFileName"
                        :large="item.fileName"
                        preview="1"
                        preview-text="大图片"
                    >
                </p>
            </div>
            <div class="right">
                <img class="doc-avatar" v-if="direction == 1" :src="genHeadIcon(msg.doctorIco)">
                <p v-if="direction == 0" class="name" v-html="info.name"></p>
                <p v-if="direction == 0 && msg.msgType == 0" class="content" v-html="msg.showText"></p>
                <p v-if="direction == 0 && msg.msgType == 1" class="content">
                    <img
                        v-for="(item,index) of msg.url"
                        :key="index"
                        :src="item.smallFileName"
                        :large="item.fileName"
                        preview="2"
                        preview-text="大图片"
                    >
                </p>
            </div>
        </div>
        <div v-if="msg.msgType === 5" class="item-me">
            <div class="left">
                <p class="name" v-html="info.name || '主任医师'"></p>
                <div class="content">
                    <p class="suggest-title">咨询建议</p>
                    <div class="suggest-mainsuit">
                        <span>主诉：</span>
                        <span v-html="msg.msg.mainsuit"></span>
                    </div>
                    <div class="suggest-initialDiagnosis">
                        <span>初步诊断：</span>
                        <span v-html="msg.msg.assessmentcontent"></span>
                    </div>
                    <div class="suggest-handleSuggestion">
                        <span>处理建议：</span>
                        <span v-html="msg.msg.handlingOpinions"></span>
                    </div>
                    <div class="suggest-handleSuggestion" v-if="msg.msg.rp">
                        <span>rp&nbsp;:&nbsp;</span>
                        <span>
                            {{msg.msg.rp.itemname}}&nbsp;{{msg.msg.rp.itemspec}}
                        </span>
                        <!-- <span v-for="(items,index) in msg.msg.rp.itemspec" :key="index">
                            {{msg.msg.rp.itemspec}}{{msg.msg.rp.itemspec}}
                        </span> -->
                    </div>
                    <hr class="suggest-line">
                    <p class="suggest-btn-box">
                        <span class="see-detail" @click="showSuggest">查看详情</span>
                    </p>
                </div>
            </div>
            <div class="right">
                <img class="doc-avatar" :src="genHeadIcon(msg.doctorIco)">
            </div>
        </div>
        <div class="item-you" v-if="msg.msgType === 3">
            <div class="left">
                <img class="member_avatar" :src="msg.memberIco">
            </div>
            <div class="right">
                <p class="name" v-html="info.name"></p>
                <div class="content">
                    <p class="text" v-html="msg.msg"></p>
                    <div class="imgs">
                        <img
                            class="pic"
                            v-for="(item,index) of imgList"
                            :key="index"
                            :src="item.smallFileName"
                            :large="item.fileName"
                            preview="3"
                            preview-text="症状图片"
                        >
                    </div>
                    <hr class="line">
                    <p class="btns">
                        <span class="see-detail" @click="showDetail">查看详情</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="item-me" v-if="msg.msgType === 9">
            <div class="left">
                <p class="name" v-html="info.name || '主任医师'"></p>
                <div class="content" @click="showHealthInfo(msg.educationId)">
                    <img class="left-pic" :src="msg.cover.smallFileName">
                    <div class="left-content">
                        <p class="title">{{msg.title}}</p>
                        <p class="detail">{{msg.synopsis}}</p>
                    </div>
                </div>
            </div>
            <div class="right">
                <img class="doc-avatar" :src="genHeadIcon(msg.doctorIco)">
            </div>
        </div>
        <div class="item-you" v-if="direction == 0 && msg.msgType === 2">
            <div class="left">
                <img class="member_avatar" :src="msg.memberIco">
            </div>
            <div class="right">
                <p class="name" v-html="info.name"></p>
                <div class="content audio-box" @click="audioPlay($event,direction,'audio_img_'+ind)">
                    <img
                        :ref="'audio_img_'+ind"
                        :data-flow="direction"
                        class="audio-img"
                        src="./../assets/images/audio-you.png"
                    >
                    <span>{{msg.palyTime}}''</span>
                    <audio style="display:none;" ref="memberAudio" :src="msg.url[0].targetFileName"></audio>
                </div>
            </div>
        </div>
        <div class="item-me" v-if="direction == 1 && msg.msgType === 2">
            <div class="left">
                <p class="name" v-html="info.name || '主任医师'"></p>
                <div class="content audio-box" @click="audioPlay($event,direction,'audio_img_'+ind)">
                    <span>{{msg.palyTime}}''</span>
                    <img
                        :ref="'audio_img_'+ind"
                        :data-flow="direction"
                        class="audio-img"
                        src="../assets/images/audio-me.png"
                    >
                    <audio style="display:none;" :src="msg.url[0].targetFileName"></audio>
                </div>
            </div>
            <div class="right">
                <img class="doc-avatar" :src="genHeadIcon(msg.doctorIco)">
            </div>
        </div>
        <div class="start-notice" v-if="msg.msgType === 4">
            {{msg.showText}}
        </div>
    </li>
</template>

<script type="text/javascript">
import util from "@/utils";
import config from "@/configs";
import emojiObj from "../configs/emoji";
/*
0:文字,1:图片,2:语音,3:病情描述,4:接单提示,5:咨询建议,6:评价,7:其他医生关注,8:自填门诊记录,9:宣教资料,10:问药,11;拒绝,12:开始提示
0,1,2,3,5,9
*/
export default {
    props: {
        type: String, // 类型，chatroom, session
        direction: Number,
        ind: Number,
        cTime: {
            type: String,
            default: 0
        },
        content: {
            type: Object,
            default() {
                return {};
            }
        },
        userInfos: {
            type: Object,
            default() {
                return {};
            }
        },
        myInfo: {
            type: Object,
            default() {
                return {};
            }
        },
        imgs: {
            type: Array,
            default() {
                return [{ fileName: "", smallFileName: "" }];
            }
        }
    },
    data() {
        return {
            // msg: "",
            // imgs: [],
            detail1: "",
        };
    },
    computed: {
        info() {
            if (this.direction == 1) {
                return this.myInfo;
            } else {
                return this.userInfos;
            }
        },
        msg() {
            const content = typeof this.content === "string" ? JSON.parse(this.content) : this.content;
            let item = Object.assign({}, content);
            // 标记用户，区分聊天室、普通消息
            if (this.type === "session") {
                if (item.msgType === 0) {
                    item.showText = util.escape(item.msg);
                    if (/\[[^\]]+\]/.test(item.showText)) {
                        let emojiItems = item.showText.match(/\[[^\]]+\]/g);
                        emojiItems.forEach(text => {
                            let emojiCnt = emojiObj.emojiList.emoji;
                            if (emojiCnt[text]) {
                                item.showText = item.showText.replace(
                                    text,
                                    `<img class="emoji-small" src="${
                                        emojiCnt[text].img
                                    }">`
                                );
                            }
                        });
                    }
                } else if (item.msgType == 5) {
                    if(typeof item.msg == 'string'){
                        item.msg = JSON.parse(item.msg);
                        // item.msg.msg.rp = JSON.parse(item.msg.msg.rp)
                    }
                } else if (item.msgType == 9) {
                    if (item.cover) {
                        item.cover = JSON.parse(item.cover);
                        item.cover.fileName =
                            this.fileBaseUrl +
                            item.cover.fileName;
                        item.cover.smallFileName =
                            this.fileBaseUrl +
                            item.cover.smallFileName;
                    } else {
                        item.cover = {};
                        item.cover.fileName = "";
                        item.cover.smallFileName = "";
                    }
                    let tmpLen = item.synopsis.length,
                        max = 52;
                    if (tmpLen > max) {
                        item.synopsis = item.synopsis.substr(0, max) + "...";
                    }
                } else if (item.msgType == 1) {
                    item.url = JSON.parse(item.url);
                    item.url.map((el, i) => {
                        el.smallFileName =
                            this.fileBaseUrl + el.smallFileName;
                        el.fileName =
                            this.fileBaseUrl + el.fileName;
                    });
                    this.$previewRefresh();
                } else if (item.msgType == 2) {
                    item.url = JSON.parse(item.url);
                    item.url.map((el, i) => {
                        el.targetFileName =
                            this.fileBaseUrl + el.targetFileName;
                    });
                } else if(item.msgType == 4){
                    item.showText = '昆时云医助手提醒您：已经与患者建立连接。';
                }else if(item.msgType == 6){
                    item.showText = '您的问诊已结束';
                }
            }
            return item;
        },
        detail() {
            let tmpStr,
                tmpLen = this.detail1.length,
                max = 52;
            if (tmpLen > max) {
                tmpStr = this.detail1.substr(0, max) + "...";
            }
            return tmpStr;
        },
        time() {
            let tmpTime = parseInt(this.cTime);
            if (this.tmpTime < 9999) {
                return this.cTime;
            } else {
                let oDate = new Date(this.cTime);
                return (
                    oDate.getFullYear() +
                    "-" +
                    this.toDouble(oDate.getMonth() + 1) +
                    "-" +
                    this.toDouble(oDate.getDate()) +
                    " " +
                    this.toDouble(oDate.getHours()) +
                    ":" +
                    this.toDouble(oDate.getMinutes()) +
                    ":" +
                    this.toDouble(oDate.getSeconds())
                );
            }
        },
        imgList() {
            let tmpList = [];
            if (this.imgs) {
                if (!Array.isArray(this.imgs)) {
                    tmpList = JSON.parse(this.imgs);
                } else {
                    tmpList = this.imgs;
                }
                if (tmpList.length > 0) {
                    tmpList.map(el => {
                        el.fileName =
                            this.fileBaseUrl + el.fileName;
                        el.smallFileName =
                            this.fileBaseUrl + el.smallFileName;
                    });
                }
            } else {
            }
            this.$previewRefresh();
            return tmpList;
        }
    },
    methods: {
        showHealthInfo(id) {
            this.$emit("showHealthInfo", id, 2);
        },
        toDouble(n) {
            return n < 10 ? "0" + n : n;
        },
        showDetail() {
            this.$emit("titlestyle", "two");
        },
        showSuggest() {
            this.$emit("titlestyle", "three");
        },
        revocateMsg(vNode) {
            // 在会话聊天页
            if (this.$store.state.currSessionId) {
                if (vNode && vNode.data && vNode.data.attrs) {
                    let attrs = vNode.data.attrs;
                    if (attrs.type === "robot") {
                        return;
                    }
                    // 自己发的消息
                    if (attrs.flow === "out") {
                        let that = this;
                        this.$vux.confirm.show({
                            title: "确定需要撤回消息",
                            onCancel() {},
                            onConfirm() {
                                that.$store.dispatch("revocateMsg", {
                                    idClient: attrs.idClient
                                });
                            }
                        });
                    }
                }
            }
        },
        audioPlay(e, direction, i) {
            let audio;
            [].slice.call(e.target.children,0).map(el=>{
                if(el.localName == 'audio'){
                    audio = el;
                }
            })
            let audios = window.document.getElementsByTagName("audio");
            let audioImgs = window.document.getElementsByClassName("audio-img");
            if (audio) {
                if (!audio.paused) {
                    for (let childImg of audioImgs) {
                        if (childImg.getAttribute("data-flow") == "0")
                            childImg.setAttribute(
                                "src",
                                require("../assets/images/audio-you.png")
                            );
                        else
                            childImg.setAttribute(
                                "src",
                                require("../assets/images/audio-me.png")
                            );
                    }
                    audio.currentTime = 0;
                    audio.pause();
                } else {
                    for (let childAudio of audios) {
                        childAudio.currentTime = 0;
                        childAudio.pause();
                    }
                    for (let childImg of audioImgs) {
                        if (childImg.getAttribute("data-flow") == "0")
                            childImg.setAttribute(
                                "src",
                                require("../assets/images/audio-you.png")
                            );
                        else
                            childImg.setAttribute(
                                "src",
                                require("../assets/images/audio-me.png")
                            );
                    }
                    if (direction == "0")
                        this.$refs[i].setAttribute(
                            "src",
                            require("../assets/images/audio-you.gif")
                        );
                    else
                        this.$refs[i].setAttribute(
                            "src",
                            require("../assets/images/audio-me.gif")
                        );
                    audio.play();

                    audio.addEventListener('ended', ()=>{
                        this.audioEnded(this.$refs[i],direction);
                    }, false);
                }
            } else {
                this.$message({ message: "语音正在加载，请稍候再次点击" });
            }
        },
        audioEnded(elObj,direction){
            if (direction == "0"){
                elObj.setAttribute(
                    "src",
                    require("../assets/images/audio-you.png")
                );
            }else{
                elObj.setAttribute(
                    "src",
                    require("../assets/images/audio-me.png")
                );
            }
        },
        genHeadIcon(ico) {
            let resUrl = '';
            if (typeof ico === 'object' && ico) {
                resUrl = this.fileBaseUrl + ico.fileName
            } else {
                resUrl = this.fileBaseUrl + JSON.parse(ico).fileName;
            }
            return resUrl;
        }
    },
    mounted() {}
};
</script>

<style lang="less" scoped>
.u-msg {
    font-size:12px !important;
    margin-bottom: 30px;
    .time-tag {
        width: 100%;
        padding: 0 120px;
        position: relative;
        color:#999999;
        .line {
            border-color: #e7e7e7;
        }
        .time {
            position: absolute;
            width: 150px;
            height: 20px;
            line-height: 20px;
            border-radius: 5px;
            text-align: center;
            left: calc(50% - 90px);
            top: -8px;
            color: #fff;
            background: #dadada;
        }
    }
}
.u-msg > div:not(.time-tag) {
    // margin-top:8px;
}
.u-msg > div.time-tag {
    margin-bottom: 5px;
}
.item-me,
.item-you {
    display: flex;
}
.item-me > div,
.item-you > div {
    display: inline-block;
}
.item-me {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    .left {
        max-width: 100%;
        padding: 10px;
        margin-left: 150px;
        .name {
            height: 30px;
            line-height: 30px;
        }
        .content {
            text-align: left;
            position: relative;
            float: right;
            right: 10px;
            background: #1ca2ff;
            color: #ffffff;
            padding: 10px;
            // display: flex;
            line-height: 28px;
            border-top-left-radius: 15px;
            border-bottom-right-radius: 15px;
            border-bottom-left-radius: 15px;
            .left-pic {
                max-width: 100px;
                max-height: 100px;
                margin-right: 10px;
                vertical-align: middle;
            }
            .left-content {
                display: inline-block;
                width: 260px;
                margin-top: 30px;
                vertical-align: middle;
                .title {
                    font-size: 14px;
                    height: 28px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                .detail {
                    max-height: 84px;
                }
            }
            .suggest-title {
                font-size: 14px;
            }
            .suggest-mainsuit {
                max-width: 380px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .suggest-initialDiagnosis {
                max-width: 380px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .suggest-handleSuggestion {
                max-width: 380px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .suggest-line {
                height: 1px;
                background-color: #ffffff;
                border: 0;
                margin: 5px 0;
            }
            .suggest-btn-box {
                text-align: right;
                .see-detail{
                    font-size:12px;
                    color:#ffffff;
                    cursor: pointer;
                    display:inline-block;
                }
            }
        }
        .content:before {
            content: "";
            display: inline-block;
            position: absolute;
            right: -10px;
            top: 10px;
            width: 0;
            height: 0;
            border-top: 10px solid #1ca2ff;
            border-right: 10px solid transparent;
        }
        img {
            max-width: 100px;
            margin: 5px;
        }
        .content.audio-box {
            width: 120px;
            height: 48px;
            border-top-left-radius: 15px;
            border-bottom-right-radius: 15px;
            border-bottom-left-radius: 15px;
            background: #1ca2ff;
            text-align: right;
            padding:0;
            line-height:48px;
            .audio-img {
                height: 20px;
                margin-right: 20;
                vertical-align: middle;
                pointer-events: none;
            }
            span{
                pointer-events: none;
            }
        }
        .content.audio-box:before {
            content: "";
            display: inline-block;
            position: absolute;
            right: -10px;
            top: 15px;
            width: 0;
            height: 0;
            border-top: 10px solid #1ca2ff;
            border-right: 10px solid transparent;
        }
    }
    .right {
        max-width: 60px;
        .doc-avatar {
            width: 60px;
            height: 60px;
            margin-top: 10px;
            position: relative;
        }
        .doc-avatar:after {
            content: "";
            display: inline-block;
            position: absolute;
            // 背景填满遮挡住加载失败等提示
            z-index: 2;
            top: 0;
            left: 0;
            width: 60px;
            height: 60px;
            background-image: url("./../assets/images/doctor.jpg");
            background-size: cover;
            background-color: #fff;
        }
        img {
            max-width: 100px;
            margin: 5px;
        }
    }
}
.item-you {
    text-align: left;
    display: flex;
    justify-content: flex-start;
    .left {
        width: 60px;
        .member_avatar {
            width: 60px;
            height: 60px;
            margin-top: 10px;
            border-radius:50%;
        }
        .member_avatar:after {
            content: "";
            display: inline-block;
            position: absolute;
            // 背景填满遮挡住加载失败等提示
            z-index: 2;
            top: 0;
            left: 0;
            width: 60px;
            height: 60px;
            background-image: url("./../assets/images/doctor.jpg");
            background-size: cover;
            background-color: #fff;
        }
    }
    .right {
        max-width: 100%;
        padding: 10px;
        margin-right: 150px;
        .name {
            height: 30px;
            line-height: 30px;
        }
        .content {
            text-align: left;
            position: relative;
            float: left;
            left: 10px;
            background: #f5f5f5;
            color: #333333;
            padding: 10px;
            // font-size: 14px;
            line-height: 28px;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
            border-bottom-left-radius: 15px;
            .imgs {
                .pic {
                    max-width: 100px;
                    max-height: 100px;
                    margin: 5px;
                }
            }
            .line {
                height: 1px;
                background-color: #e7e7e7;
                border: 0;
            }
            .btns {
                text-align: right;
                .see-detail{
                    font-size:12px;
                    color:#1ca2ff;
                    cursor: pointer;
                    display:inline-block;
                }
            }
        }
        .content:before {
            content: "";
            display: inline-block;
            position: absolute;
            left: -10px;
            top: 10px;
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-top: 10px solid #f5f5f5;
        }
        img {
            max-width: 100px;
            margin: 5px;
        }
        .content.audio-box {
            width: 120px;
            height: 48px;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
            border-bottom-left-radius: 15px;
            background: #f5f5f5;
            text-align: left;
            padding:0;
            line-height:48px;
            .audio-img {
                height: 20px;
                margin-left: 20px;
                vertical-align: middle;
                pointer-events: none;
            }
            span{
                pointer-events: none;
            }
        }
        .content.audio-box:before {
            content: "";
            display: inline-block;
            position: absolute;
            left: -10px;
            top: 15px;
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-top: 10px solid #f5f5f5;
        }
    }
}
.start-notice{
    text-align:center;
    color:#1ca2ff;
}
</style>